<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>

<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:pou="http://primefaces.org/ui">
    <!-- ${facesContext.externalContext.requestContextPath} -->


    <h:head>
        <title>Graficas</title>
        <link  type="text/css" rel="stylesheet" href="#{request.contextPath}/js/jquery.jqplot.css" ></link>
        <script  type="text/javascript" src="#{request.contextPath}/js/jquery.js"></script>
        <script  type="text/javascript" src="#{request.contextPath}/js/jquery.jqplot.js"></script>
        <script type="text/javascript"  src="#{request.contextPath}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
        <script  type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.barRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.pointLabels.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.pieRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.donutRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.dateAxisRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.barRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
        <script type="text/javascript" src="#{request.contextPath}/js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>


        <script type="text/javascript">
            function jqplotToImg(objId) {
                // first we draw an image with all the chart components
                var newCanvas = document.createElement("canvas");
                newCanvas.width = $("#" + objId).width();
                newCanvas.height = $("#" + objId).height();
                var baseOffset = $("#" + objId).offset();
                
                $("#" + objId).children().each(
                function() {
                    // for the div's with the X and Y axis
                    if ($(this)[0].tagName.toLowerCase() == 'div') {
                        // X axis is built with canvas
                        $(this).children("canvas").each(
                        function() {
                            var offset = $(this).offset();
                            newCanvas.getContext("2d").drawImage(this,
                            offset.left - baseOffset.left,
                            offset.top - baseOffset.top);
                        });
                        // Y axis got div inside, so we get the text and draw it on
                        // the canvas
                        $(this).children("div").each(
                        function() {
                            var offset = $(this).offset();
                            var context = newCanvas.getContext("2d");
                            context.font = $(this).css('font-style') + " "
                                + $(this).css('font-size') + " "
                                + $(this).css('font-family');
                            context.fillText($(this).html(), offset.left
                                - baseOffset.left, offset.top
                                - baseOffset.top + 10);
                        });
                    }
                    // all other canvas from the chart
                    else if ($(this)[0].tagName.toLowerCase() == 'canvas') {
                        var offset = $(this).offset();
                        newCanvas.getContext("2d").drawImage(this,
                        offset.left - baseOffset.left,
                        offset.top - baseOffset.top);
                    }
                });
                
                // add the point labels
                $("#" + objId).children(".jqplot-point-label").each(
                function() {
                    var offset = $(this).offset();
                    var context = newCanvas.getContext("2d");
                    context.font = $(this).css('font-style') + " "
                        + $(this).css('font-size') + " "
                        + $(this).css('font-family');
                    context.fillText($(this).html(), offset.left - baseOffset.left,
                    offset.top - baseOffset.top + 10);
                });
                
                // add the rectangles
                $("#" + objId + " *").children(".jqplot-table-legend-swatch").each(
                function() {
                    var offset = $(this).offset();
                    var context = newCanvas.getContext("2d");
                    context.setFillColor($(this).css('background-color'));
                    context.fillRect(offset.left - baseOffset.left, offset.top
                        - baseOffset.top, 15, 15);
                });
                
                // add the legend
                $("#" + objId + " *").children(".jqplot-table-legend td:last-child").each(
                function() {
                    var offset = $(this).offset();
                    var context = newCanvas.getContext("2d");
                    context.font = $(this).css('font-style') + " "
                        + $(this).css('font-size') + " "
                        + $(this).css('font-family');
                    context.fillText($(this).html(), offset.left - baseOffset.left,
                    offset.top - baseOffset.top + 15);
                });
                
                window.open(newCanvas.toDataURL(), "directories=no");
            }

        </script>   
        <script type="text/javascript">
            //        $(document).ready(function(){
            //            var plot1 = $.jqplot ('chart1',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
            //            var plot1 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]]);
            //            var plot2 = $.jqplot ('chart3', [[3,7,9,1,4,6,8,2,5]], {
            //                // Give the plot a title.
            //                title: 'Plot With Options',
            //                // You can specify options for all axes on the plot at once with
            //                // the axesDefaults object.  Here, we're using a canvas renderer
            //                // to draw the axis label which allows rotated text.
            //                axesDefaults: {
            //                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            //                },
            //                // An axes object holds options for all axes.
            //                // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
            //                // Up to 9 y axes are supported.
            //                axes: {
            //                    // options for each axis are specified in seperate option objects.
            //                    xaxis: {
            //                        label: "X Axis",
            //                        // Turn off "padding".  This will allow data point to lie on the
            //                        // edges of the grid.  Default padding is 1.2 and will keep all
            //                        // points inside the bounds of the grid.
            //                        pad: 0
            //                    },
            //                    yaxis: {
            //                        label: "Y Axis"
            //                    }
            //                }
            //            });
            //        });             
        </script>

        <script type="text/javascript">
            $(document).ready(function(){
                var s1 = [#{graphic.s1}]// [200, 600, 700, 1000];
                var s2 = [#{graphic.s2}]//[460, -210, 690, 820];
                //    var s3 = [-260, -440, 320, 200];
                // Can specify a custom tick Array.
                // Ticks should match up one for each y value (category) in the series.
                var ticks = [#{graphic.ticks}];
     
                var plot1 = $.jqplot('histchart', [s1, s2], {
                    // The "seriesDefaults" option is an options object that will
                    // be applied to all series in the chart.
                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: {fillToZero: true}
                    },
                    // Custom labels for the series are specified with the "label"
                    // option on the series option.  Here a series option object
                    // is specified for each series.
                    series:[
                        {label:'#{graphic.seriesName1}'},
                        {label:'#{graphic.seriesName2}'}//,
                        //            {label:'Airfare'}
                    ],
                    // Show the legend and put it outside the grid, but inside the
                    // plot container, shrinking the grid to accomodate the legend.
                    // A value of "outside" would not shrink the grid and allow
                    // the legend to overflow the container.
                    legend: {
                        show: true,
                        placement: 'outsideGrid'
                    },
                    axes: {
                        // Use a category axis on the x axis and use our custom ticks.
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks
                        },
                        // Pad the y axis just a little so bars can get close to, but
                        // not touch, the grid boundaries.  1.2 is the default padding.
                        yaxis: {
                            pad: 1.05,
                            tickOptions: {formatString: 'Q%d'}
                        }
                    }
                });
            });
        </script>dataDonutGraphic
        <script type="text/javascript">
            $(document).ready(function(){
                var s1 = [#{graphic.hs1}]// [200, 600, 700, 1000];
                var s2 = [#{graphic.hs2}]//[460, -210, 690, 820];
                //    var s3 = [-260, -440, 320, 200];
                // Can specify a custom tick Array.
                // Ticks should match up one for each y value (category) in the series.
                var ticks = [#{graphic.hticks}];
     
                var plot1 = $.jqplot('histchart1', [s1, s2], {
                    // The "seriesDefaults" option is an options object that will
                    // be applied to all series in the chart.
                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: {fillToZero: true}
                    },
                    // Custom labels for the series are specified with the "label"
                    // option on the series option.  Here a series option object
                    // is specified for each series.
                    series:[
                        {label:'#{graphic.hseriesName1}'},
                        {label:'#{graphic.hseriesName2}'}//,
                        //            {label:'Airfare'}
                    ],
                    // Show the legend and put it outside the grid, but inside the
                    // plot container, shrinking the grid to accomodate the legend.
                    // A value of "outside" would not shrink the grid and allow
                    // the legend to overflow the container.
                    legend: {
                        show: true,
                        placement: 'outsideGrid'
                    },
                    axes: {
                        // Use a category axis on the x axis and use our custom ticks.
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks
                        },
                        // Pad the y axis just a little so bars can get close to, but
                        // not touch, the grid boundaries.  1.2 is the default padding.
                        yaxis: {
                            pad: 1.05,
                            tickOptions: {formatString: '$%d'}
                        }
                    }
                });
            });
        </script>

        <script>
            $(document).ready(function(){
                var data = [ #{graphic.dataDonutGraphic}
                    //    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
                    //    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
                ];
                var plot1 = jQuery.jqplot ('donut', [data], 
                { 
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer, 
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    }, 
                    legend: { show:true, location: 'e' }
                }
            );
            });
        </script>

        <script>
            $(document).ready(function(){
                var data = [ #{graphic.dataDonutGraphic1}
                    //    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
                    //    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
                ];
                var plot1 = jQuery.jqplot ('donut1', [data], 
                { 
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer, 
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    }, 
                    legend: { show:true, location: 'e' }
                }
            );
            });
        </script>
        <script >
            $(document).ready(function(){
                // Some simple loops to build up data arrays.
                var arr1 = [#{graphic.arr1}];
                var arr2 = [#{graphic.arr2}];    
                var arr3 = [#{graphic.arr3}];    

                var plot3 = $.jqplot('chart3', [arr1, arr2, arr3], 
                { 
                    title:'#{graphic.title}', 
                    // Series options are specified as an array of objects, one object
                    // for each series.
                    series:[ 
                        {
                            // Change our line width and use a diamond shaped marker.
                            lineWidth:2, 
                            markerOptions: { style:'dimaond' }
                        }, 
                        {
                            // Don't show a line, just show markers.
                            // Make the markers 7 pixels with an 'x' style
                            //            showLine:false, 
                            lineWidth:3,
                            markerOptions: { size: 7, style:"x" }
                        },
                        { 
                            // Use (open) circlular markers.
                            markerOptions: { style:"circle" }
                        } 
                        //          ,{
                        //            // Use a thicker, 5 pixel line and 10 pixel
                        //            // filled square markers.
                        //            lineWidth:5, 
                        //            markerOptions: { style:"filledSquare", size:10 }
                        //          }
                    ]
                }
            ); 
            });      
        </script>
        <script >
            $(document).ready(function(){
                // Some simple loops to build up data arrays.
                var arr1 = [#{graphic.arr4}];
                var arr2 = [#{graphic.arr5}];    
                var arr3 = [#{graphic.arr6}];    

                var plot3 = $.jqplot('chart4', [arr1, arr2, arr3], 
                { 
                    title:'#{graphic.title1}', 
                    // Series options are specified as an array of objects, one object
                    // for each series.
                    series:[ 
                        {
                            // Change our line width and use a diamond shaped marker.
                            lineWidth:2, 
                            markerOptions: { style:'dimaond' }
                        }, 
                        {
                            // Don't show a line, just show markers.
                            // Make the markers 7 pixels with an 'x' style
                            //            showLine:false, 
                            lineWidth:3,
                            markerOptions: { size: 7, style:"x" }
                        },
                        { 
                            // Use (open) circlular markers.
                            markerOptions: { style:"circle" }
                        } 
                        //          ,{
                        //            // Use a thicker, 5 pixel line and 10 pixel
                        //            // filled square markers.
                        //            lineWidth:5, 
                        //            markerOptions: { style:"filledSquare", size:10 }
                        //          }
                    ]
                }
            ); 
            });      
        </script>
        <script>
            $(document).ready(function(){
                var s1 = [2, 6, 7, 10];
                var s2 = [7, 5, 3, 4];
                var s3 = [14, 9, 3, 8];
                plot3 = $.jqplot('chart5', [s1, s2, s3], {
                    // Tell the plot to stack the bars.
                    //    stackSeries: true,
                    captureRightClick: true,
                    //    series:[
                    //     {pointLabels:{
                    //        show: true,
                    //        labels:[
                    //            'dos', 'seis', 'siete', 'diez',
                    //            'dos', 'seis', 'siete', 'diez',
                    //            'dos', 'seis', 'siete', 'diez'
                    //            ]
                    //      }}],
                    seriesDefaults:{
                        pointLabels: { show:true } ,
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: {
                            // Put a 30 pixel margin between bars.
                            barMargin: 30,
                            // Highlight bars when mouse button pressed.
                            // Disables default highlighting on mouse over.
                            highlightMouseDown: true   
                        },
                        pointLabels: {show: true}
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer
                        },
                        yaxis: {
                            // Don't pad out the bottom of the data range.  By default,
                            // axes scaled as if data extended 10% above and below the
                            // actual range to prevent data points right on grid boundaries.
                            // Don't want to do that here.
                            padMin: 0
                        }
                    },
                    legend: {
                        show: true,
                        location: 'e',
                        placement: 'outside'
                    }      
                });
                // Bind a listener to the "jqplotDataClick" event.  Here, simply change
                // the text of the info3 element to show what series and ponit were
                // clicked along with the data for that point.
                //  $('#chart3').bind('jqplotDataClick', 
                //    function (ev, seriesIndex, pointIndex, data) {
                //      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
                //    }
                //  ); 
            });
        </script>
        <script>
            $(document).ready(function(){
                var line1 = [#{graphic.pbarr1}];
                var line2 = [#{graphic.pbarr2}];
 
                var plot2 = $.jqplot('chart7', [line1, line2], {
                    series:[{renderer:$.jqplot.BarRenderer}, {xaxis:'x2axis', yaxis:'y2axis'}],
                    axesDefaults: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                        tickOptions: {
                            angle: 30
                        }
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer
                        },
                        x2axis: {
                            renderer: $.jqplot.CategoryAxisRenderer
                        },
                        yaxis: {
                            autoscale:true
                        },
                        y2axis: {
                            autoscale:true
                        }
                    }
                });
            });
        </script>
        <script>
            $(document).ready(function(){
            
                var line1 = [#{graphic.pbarr3        }];
                var line2 = [#{graphic.pbarr4}];
  
  
                var plot2 = $.jqplot('chart8', [line1, line2], {
                    series:[{renderer:$.jqplot.BarRenderer}, {xaxis:'x2axis', yaxis:'y2axis'}],
                    axesDefaults: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                        tickOptions: {
                            angle: 30
                        }
                    },
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer
                        },
                        x2axis: {
                            renderer: $.jqplot.CategoryAxisRenderer
                        },
                        yaxis: {
                            autoscale:true
                        },
                        y2axis: {
                            autoscale:true
                        }
                    }
                });
            });
        </script>
    </h:head>
    <body>
        <h:panelGroup id="printId" style="display: block" > 
            <div>
                <div id="histchart" style="width: 600px; height: 300px;  float: left "  ></div>
                <div id="histchart1" style="width: 600px; height: 300px;  float: right"  ></div>
            </div>  
            <div>
                <div id="donut" style="width: 600px; height: 300px;  float: left "  ></div>
                <div id="donut1" style="width: 600px; height: 300px;  float: right"  ></div>
            </div>
            <div>
                <div id="chart3" style="width: 600px; height: 300px;  float: left"  ></div>
                <div id="chart4" style="width: 600px; height: 300px;  float: right"  ></div>
            </div>
            <div>
                <div id="chart5" style="width: 600px; height: 300px;  float: left"  ></div>
                <div id="chart7" style="width: 600px; height: 300px;  float: right"  ></div>
            </div>
            <div>
                <div id="chart8" style="width: 600px; height: 300px;  float: left"  ></div>
            </div>
            <!--<input type="button" onclick="jqplotToImg('histchart')">-->
        </h:panelGroup>  


    </body>



</ui:composition>
